<template>
	<p v-if="!items.length">Loading...</p>
	<ul v-else >
		<li v-for="item in items">
			<slot name="item" v-bind="item">{{item.body}}</slot>
		</li>
	</ul>
</template>

<script setup>
	import { ref } from 'vue' 
	
	const props = defineProps(['api_url', 'per-page'])
	const items = ref([])
	
	setTimeout(()=>{
		items.value = [
			{body: 'Scoped Slots Guide', username: 'Evan You', likes: 20},
			{ body: 'Vue Tutorial', username: 'Natalia Tepluhina', likes: 10 }
		]
	}, 3000)
</script>

<style scoped>
	ul {
		padding: 5px;
		list-style-type: none;
		background: linear-gradient(315deg, #42d392, #647eff);
	}
	li {
		margin: 10px;
		padding: 5px 20px;
		background: #fff;
	}
</style>